<template>
  <div class="pie">
    <div id="pie1">
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="main1" style="float:left;width:100%;height: 800px"></div>
    </div>
  </div>
</template>

<script>
var echarts = require('echarts')
export default {
  name: 'chartmap',
  data () {
    return {
      data1: []
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData: function () {
      this.requested = true
      var url = this.global_request_url.requestMapData
      this.$axios.post(url).then(resp => {
        console.log('-----------进入echarts加载数据')
        // 动态数据
        this.data1 = resp.data
        console.log(this.data1.length)

        var jsondataName = []
        var jsondata = []
        for (var i = 0; i < this.data1.length; i++) {
          jsondataName.push(this.data1[i].key)
          jsondata.push({
            name: this.data1[i].key,
            value: this.data1[i].doc_count
          })
        }
        console.log('---------------jsondata----------------')
        console.log(jsondata)
        console.log('---------------jsondataName----------------')
        console.log(jsondataName)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '隐患数据类型统计',
            subtext: '白山',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: jsondataName
          },
          series: [
            {
              name: '故障类型',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: jsondata,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      })
    }
  },
  created: function () {
    // this.funB()
  }
}
</script>
<style>
</style>
